<template>
    <!--我的提货单-->
    <div class="bill">
      <div class="bill_types flex p_r30 p_l30 border_b bg_colorff" @click="showbilltypesFn">
        <div class="flex-1">{{billtypestitle}}</div>
        <div class="flex-1 color_99 t_right">筛选
          <img v-if="!isbilltypes" class="down_icon" src="../../assets/img/icon/jiantou_down.png"/>
          <img v-if="isbilltypes" class="down_icon" src="../../assets/img/icon/jiantou_top.png"/>
        </div>
      </div>

      <div class="bill_typesbox p_l30 bg_colorff" v-if="isbilltypes">
        <div class="bill_types border_b" v-for="(bill,index) in billtypelist" :key="index" @click="changebilltypeFn(bill.title,bill.status,bill.type)">{{bill.title}}</div>
      </div>

      <div class="" style="overflow:scroll">
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :bottomDistance="bottomDistance">
          <div class="gooslist_item bg_colorff m_t20" v-for="(goods,index) in gooslist" :key="index" @click="gobillinfoFn(goods.pick_sn)">
            <div class="p_b20 color_33" v-for="(goodsinfo, index1) in goods.goods_list" :key="index1">
              <div class=" font_size28">商品名称： {{goodsinfo.goods_name}}</div>
              <div class="font_size24 m_t10">提货数量：{{goodsinfo.number}}</div>
            </div>
            <div class="flex font_size24 line80" style="border-top: 1px solid #dddddd">
              <div class="color_33">状态：
                <span v-if="goods.status == 0 && goods.type == 1">未提货</span>
                <span v-if="goods.status == 1 && goods.type == 1">已提货</span>
                <span v-if="goods.status == 0 && goods.type == 2">未发货</span>
                <span v-if="goods.status == 1 && goods.type == 2">已发货</span>
                <span v-if="goods.status == 2 && goods.type == 2">已收货</span>
              </div>
              <div class="flex-1 t_right">
                <span class="color_fc" v-if="goods.type == 2">自提</span>
                <div  v-if="goods.type == 1">
                  <span class="shouhuobtn t_center" v-if="goods.goodstatus == 2" @click.stop="cellectgoodsFn">确认收货</span>
                  <span class="color_fc">快递</span>
                </div>
              </div>
            </div>
          </div>
        </mt-loadmore>


      </div>

      <div class="layer" v-if="iscollect">
        <div class="layer_box t_center">
          <div class="tip_info border_b ">
            <img class="shouhuo_icon" src="../../assets/img/shouhuo.png" />
            <div class="font_size32 color_33">请确认商品已经收到</div>
          </div>
          <div class="flex line90 color_33 font_size32 ">
            <div class="flex-1" @click="querbtn(1)">确认</div>
            <div class="flex-1 border_l"  @click="querbtn(2)">取消</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
      name: "center_billoflading",
      data(){
          return{
            billtypestitle: '全部提货单',
            tihuptype: '9',
            orderstatus: '9',
            pagesNum: 1, //当前页数
            maxPageNum: 0, //最大页数
            allLoaded: false, //是否宣布加载完
            bottomDistance: 120, //触发上拉加载的阈值
            billtypelist: [
              {title: '全部提货单', status: '9', type: '9'},
              {title: '未提货', status: 0, type: 2},
              {title: '已提货', status: 1, type: 2},
              {title: '未发货', status: 0, type: 1},
              {title: '已发货', status: 1, type: 1},
              {title: '已完成', status: 2, type: 1},
            ],
            isbilltypes: false,
            gooslist:[],
            iscollect:false
          }
      },
      watch: {
        // orderstatus(){
        //   this.getlist()
        // }
      },
      mounted(){
        this.getlist(false)
        console.log(this.pagesNum)
        // console.log(this.maxPageNum)
      },
      methods: {
        getlist(isScroll=true){
          // var self = this
          console.log(isScroll)
          if (isScroll) {
            if (this.pagesNum >= this.maxPageNum) {
              console.log(this.maxPageNum)
              console.log('wu,,,')
              this.pagesNum = this.maxPageNum;
              this.allLoaded = true;
              this.$toast("无更多数据");
              return;
            } else {
              console.log('+++')
              this.pagesNum++;
            }
          } else {
            console.log('1111')
            this.pagesNum = 1;
          }
          this.$util.get('user/getUserPickList',{
            uid: this.$store.state.userinfo.uid,
            type: this.tihuptype,
            status: this.orderstatus,
            page: this.pagesNum
          }).then(data => {
            if(data.status == 1){
              console.log(data);
              this.maxPageNum = data.data.last_page;
              console.log(this.maxPageNum);
              this.gooslist =data.data.list.concat(this.gooslist );
            }
          })
        },
        // 上拉加载
        loadBottom() {
          // this.pagesNum++
          // if(this.pagesNum>=this.maxPageNum){
          //   this.allLoaded = true;
          //   this.pagesNum = 1
          // }
          console.log('bottom')
          this.getlist(); // 上拉触发的分页查询
          this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
        },
        showbilltypesFn(status){
          var self = this
          self.isbilltypes = !self.isbilltypes
        },
        changebilltypeFn(title,status,type){
          var self = this
          self.isbilltypes = !self.isbilltypes
          self.billtypestitle = title
          self.orderstatus = status
          self.tihuptype = type
        },
        cellectgoodsFn(){
          var self = this
          self.iscollect = !self.iscollect
        },
        querbtn(type){
          var self = this
          self.iscollect = !self.iscollect
        },
        gobillinfoFn(id){
          this.$router.push({ path: '/billinfo',query:{id: id}})
        }
      }
    }
</script>

<style lang="less" scoped>
  @import "../../assets/css/public";
  @import "../../assets/css/center/center_billoflading";

</style>
